import { useState } from 'react'
import classNames from 'classnames'
import { Image } from '@tarojs/components'
import { Switch } from '@nutui/nutui-react-taro'
import styles from './index.module.less'
import { useMovieStore } from '@/common/hox/movieStore'
import { Modal } from '@/components'

type SeatAutoPropsType = {
  ghost?: boolean;
  className?: boolean;
}
function SeatAuto(props: SeatAutoPropsType) {
  const { ghost = false, className } = props
  const [visible, setVisible] = useState(false)

  const {
    schedule: {acceptChangeSeat, setAcceptChangeSeat },
  } = useMovieStore(store => [
    store.schedule.scheduleSeatInfo,
    store.schedule.acceptChangeSeat,
    store.schedule.setAcceptChangeSeat,
  ])

  // 不允许调座
  // if (!scheduleSeatInfo?.acceptChangeSeat) return null
  return (
    <div className={classNames(styles.seatAuto, { [styles.card]: !ghost }, className)}>
      <div className={styles.titleBox}>
        <div className={styles.titleContent} onClick={() => setVisible(true)} >
          <div className={styles.title}>无座位时，接受系统调座</div>
          <Image className={styles.icon} src='https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/ri--question-line.png' />
        </div>
        <Switch checked={acceptChangeSeat} onChange={(value) => setAcceptChangeSeat(value)} />
      </div>
      { !acceptChangeSeat && <div className={styles.tip}>若不接受调座，存在一定出票失败概率，建议选择可调座</div>}
      
      <Modal visible={visible} className={styles.modal}>
        <div className={styles.content}>本平台作为第三方服务商出票，由于出票过程存在时间差，可能存在已选座位被占情况。为了不耽误您的时间，我们将按照优先选取从(银幕中央-核心区域-边缘)的顺序为您调换座位。购买多张票时将继续为您保持连座。</div>
        <div className={styles.footer} onClick={() => setVisible(false)}>我知道了</div>
      </Modal>
    </div>
  )
}

export default SeatAuto